<template>
  <div >
    <el-form ref="addSkuForm" label-width="80px" :model="skuInfo">
      <!--        直接展示spu名称-->
      <el-form-item label="SPU名称">
        <span style="font-weight: 700;color: green">{{ spuName }}</span>
      </el-form-item>
      <!--        sku名称-->
      <el-form-item label="SKU名称">
        <el-input placeholder="请输入sku名称" v-model="skuInfo.skuName"></el-input>
      </el-form-item>
      <!--        sku中的价格-->
      <el-form-item label="价格(元)">
        <el-input placeholder="请输入价格" v-model="skuInfo.price" type="number"></el-input>
      </el-form-item>
      <!--        sku中的重量-->
      <el-form-item label="重量(千克)">
        <el-input placeholder="请输入重量" v-model="skuInfo.weight"></el-input>
      </el-form-item>
      <!--        sku中的规格描述-->
      <el-form-item label="SKU描述">
        <el-input :rows="4" placeholder="请填写规格描述" type="textarea" v-model="skuInfo.skuDesc"></el-input>
      </el-form-item>
      <!--        平台属性选择-->
      <el-form-item label="平台属性">
        <el-form :inline="true" label-width="120px">
          <el-form-item style="margin-bottom: 10px" v-for="baseAttr in baseSaleAttrList" :key="baseAttr.id" :label="baseAttr.attrName">
<!--            baseAttr.baseAttrAndValue用来收集属性和属性值id-->
            <el-select placeholder="请选择属性" v-model="baseAttr.baseAttrAndValue">
              <el-option
                v-for="attrVal in baseAttr.attrValueList"
                :key="attrVal.id"
                :value="`${baseAttr.id}:${attrVal.id}`"
                :label="attrVal.valueName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
<!--      销售属性选择-->
      <el-form-item label="销售属性">
        <el-form :inline="true" label-width="120px">
          <el-form-item style="margin-bottom: 10px" v-for="saleAttr in skuSaleAttrList" :key="saleAttr.id" :label="saleAttr.saleAttrName">
<!--            收集销售属性的-->
            <el-select placeholder="请选择属性" v-model="saleAttr.saleAttrAndValue">
              <el-option
                v-for="saleVal in saleAttr.spuSaleAttrValueList"
                :key="saleVal.id"
                :value="`${saleAttr.id}:${saleVal.id}`"
                :label="saleVal.saleAttrValueName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
<!--      商品图片列表-->
      <el-form-item label="图片列表">
        <el-table
          ref="multipleTable"
          :data="skuImageList"
          tooltip-effect="dark"
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            align="center"
            width="55">
          </el-table-column>
          <el-table-column label="图片">
            <template slot-scope="scope">
              <el-image style="height: 100px;width: 100px" :src="scope.row.imgUrl"></el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="imgName"
            label="名称"
            >
          </el-table-column>
          <el-table-column prop="address" label="操作" show-overflow-tooltip>
            <template slot-scope="{row,$index}">
              <el-button type="primary"
                         size="mini"
                         v-if="row.isDefault==='0'"
                         @click="changeDefault(row)"
              >改为默认</el-button>
              <el-button type="success"
                         plain size="mini"
                         @click="changeDefault(row)"
                         v-else
              >默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="confirmAddSku">保存</el-button>
        <el-button @click="cancelAdd">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "AddSku",
  data() {
    return {
      spuName:'',
      skuInfo:{
        // 第一类，父组件可以带过来的数据
        "category3Id": '',
        "spuId": 0,
        "tmId": 0,
        // 第二类，v-model收集的数据
        "price": '',
        "skuDesc": "",
        "skuName": "",
        "weight": "",
        // 第三类，需要自己整理的数据
        "skuDefaultImg": "",
        "skuAttrValueList": [
          // {
          //   "attrId": 0,// 基础属性id
          //   "valueId": 0, // 基础属性值的id
          // }
        ],
        "skuImageList": [
          // {
          //   "id": 0,
          //   "imgName": "string",
          //   "imgUrl": "string",
          //   "isDefault": "string",
          //   "skuId": 0,
          // }
        ],
        "skuSaleAttrValueList": [
          // {
          //   "saleAttrId": 0, // 销售属性id
          //   "saleAttrValueId": 0, // 销售属性值的id
          // }
        ],
      },
      // sku图片信息
      skuImageList:[],
      // sku销售属性
      skuSaleAttrList:[],
      // 平台属性
      baseSaleAttrList:[]
    }
  },
  methods:{
    // 发送请求获取sku初始化数据
    async initAddSkuInfo(row, currentCategoryId) {
      this.skuInfo.category3Id = row.category3Id
      this.skuInfo.spuId = row.id
      this.skuInfo.tmId = row.tmId
      this.spuName = row.spuName
      // 获取图片基础信息
      let imgRes = await this.$API.sku.apiGetSkuImgList(row.id)
      if (imgRes.code === 200) {
        // 进行处理添加isDefault字段
        imgRes.data.forEach(item=>{
          this.$set(item,'isDefault','0')
        })
        this.skuImageList = imgRes.data
      }

      // 获取sku的销售属性
      let saleAttr = await this.$API.sku.apiGetSkuSaleAttr(row.id)
      if (saleAttr.code === 200) {
        this.skuSaleAttrList = saleAttr.data
      }

      // 获取平台属性信息
      let baseAttr = await this.$API.attr.apiGetAttrs(currentCategoryId.category1Id,currentCategoryId.category2Id,currentCategoryId.category3Id)
      if (baseAttr.code === 200) {
        this.baseSaleAttrList = baseAttr.data
      }
    },
    // 选中图片发生变化的回调
    handleSelectionChange(selectArr) {
      // selectArr 返回的是选中的那一行的数据
      this.skuInfo.skuImageList = selectArr
    },
    // 改变某张图片是否为默认图片
    changeDefault(row){
      // 如果是要使其状态为默认图片，通过排它思想，将所有isDefault设为0
      if(row.isDefault === '0') {
        this.skuImageList.forEach(item=>{
          item.isDefault = '0'
        })
        row.isDefault = '1'
      }else {
        row.isDefault = '0'
      }
      this.skuInfo.skuDefaultImg = row.imgUrl
    },
    // 取消添加sku
    cancelAdd() {
      this.resetForm()
      this.$emit('changeShowSku','show')
      this.$message.info('已取消添加')
    },
    // 整合数据发送请求添加sku
    async confirmAddSku() {
      // 整合平台属性
      this.skuInfo.skuAttrValueList =this.baseSaleAttrList.reduce((pre,item)=>{
        if(item.baseAttrAndValue) {
          let [attrId,valueId] = item.baseAttrAndValue.split(':')
          pre.push({attrId,valueId})
        }
        return pre
      },[])
      // 整合销售属性
      this.skuInfo.skuSaleAttrValueList = this.skuSaleAttrList.reduce((pre,item)=>{
        if(item.saleAttrAndValue) {
          let [saleAttrId,saleAttrValueId] = item.saleAttrAndValue.split(':')
          pre.push({saleAttrId,saleAttrValueId})
        }
        return pre
      },[])
      // 发送请求添加sku
      let res = await this.$API.sku.apiSaveSku(this.skuInfo)
      if(res.code !== 200) {
        this.$message.error('添加sku失败')
      }else {
        this.resetForm()
        this.$emit('changeShowSku','show')
        this.$message.success('添加成功')
      }

    },
    // 清空表单的数据
    resetForm() {
      Object.assign(this._data, this.$options.data())
    }
  }

}
</script>

<style scoped>

</style>
